<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>MarkEdit Basic Example</title>
    <link rel="stylesheet" type="text/css" href="../jquery.markedit.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" />
    <style type="text/css">
        textarea { min-height: 250px; }
        .markedit { width: 75%; }
        
        .preview pre { margin-left: 10px; padding: 5px; overflow: auto; width: 50%; }
        #pane1 { font-family: Arial, Helvetica; color: blue; }
        #pane2 { background-color: black; color: white; }
        #pane3 { font-family: cursive; color: gray; background-color: orange; }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../showdown.js"></script>
    <script type="text/javascript" src="../jquery.markedit.js"></script>

    <script type="text/javascript">

        // Create a MarkEdit editor on page load
        $(function(){
            $('textarea').markedit({
                'preview' : false,
                'postload' : function() {
                    $('div.preview').each(function() {
                       $('textarea').markeditBindAutoPreview(this); 
                    });
                }
            });           
        });

    </script>
</head>
<body>
    <textarea>
**MarkEdit Basic Demo**

[Lorem Ipsum][1] is simply dummy text of the printing and typesetting industry.

    // MarkEdit for the win!
    $('textarea').markedit();
    

  [1]: http://www.lipsum.com/
    </textarea>
    
    <div class="preview" id="pane1"></div>
    
    <hr/>
    
    <div class="preview" id="pane2"></div>
    
    <hr/>
    
    <div class="preview" id="pane3"></div>
    
</body>
</html>
